<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>

<body>
    <div id="top">
        <h1>智慧物业</h1>
    </div>
    <main>
        <div id="main-left">
            <ul id="left-all">
                <li id="home">
                    <div>
                        <img src="./images/16.png" alt=""> 首页
                    </div>
                </li>
                <li class="li1">
                    <div><img src="./images/17.png" alt="">数据中心</div>

                </li>
                <ul class="hide">
                    <li>小区管理</li>
                    <li>楼宇管理</li>
                    <li>车位管理</li>
                    <li>业主管理</li>
                    <li>租客管理</li>
                    <li>访客管理</li>
                    <li>广告位管理</li>
                    <li>车辆管理</li>
                </ul>
                <li class="li2">
                    <div><img src="./images/18.png" alt="">收费管理</div>

                </li>
                <ul class="hide">
                    <li>收银台</li>
                    <li>抄表录入</li>
                    <li>未缴账单</li>
                    <li>缴费通知</li>
                    <li>已缴账单</li>
                    <li>预存款管理</li>
                    <li>收费设置</li>
                </ul>
                <li class="li3">
                    <div><img src="./images/19.png" alt="">物业服务</div>

                </li>
                <ul class="hide">
                    <li>公告管理</li>
                    <li>报事报修</li>
                    <li>投诉管理</li>
                    <li>短信管理</li>
                    <li>装修管理</li>
                </ul>
                <li class="li4">
                    <div><img src="./images/20.png" alt="">租赁管理</div>

                </li>
                <ul class="hide">
                    <li>客户管理</li>
                    <li>车位租赁</li>
                    <li>广告位租赁</li>
                    <li>房屋租赁</li>
                    <li>合同管理</li>
                </ul>
                <li class="li5">
                    <div><img src="./images/21.png" alt="">材料管理</div>

                </li>
                <ul class="hide">
                    <li>供应商管理</li>
                    <li>仓库管理</li>
                    <li>物料清单</li>
                    <li>采购入库</li>
                    <li>领用出库</li>
                    <li>维修领退料</li>
                    <li>库存查询</li>
                </ul>
                <li class="li6">
                    <div><img src="./images/22.png" alt="">设备管理</div>

                </li>
                <ul class="hide">
                    <li>设备档案</li>
                    <li>摄像头管理</li>
                    <li>保养计划</li>
                    <li>保养记录</li>
                    <li>设备运维</li>
                </ul>
                <li class="li7">
                    <div><img src="./images/23.png" alt="">收益管理</div>


                </li>
                <ul class="hide">
                    <li>收益查询</li>
                    <li>结算管理</li>
                </ul>
                <li class="li8">
                    <div><img src="./images/24.png" alt="">统计分析</div>

                </li>
                <ul class="hide">
                    <li>人员分析</li>
                    <li>缴费分析</li>
                    <li>工单分析</li>
                </ul>
                <li class="li9">
                    <div><img src="./images/25.png" alt="">系统管理</div>

                </li>
                <ul class="hide">
                    <li>机构管理</li>
                    <li>岗位管理管理</li>
                    <li>用户管理</li>
                </ul>
            </ul>
        </div>
        <div id="main-right">
            <div id="propertyHome">
                <div class="company">
                    <div class="left">
                        <img src="./images/10.png" alt="">
                        <div>
                            <strong><span>xx</span>物业公司</strong>
                            <p><span>xxx</span>小区 vip版 | 到期时间<span>2022-6-30</span></p>
                        </div>
                    </div>
                    <div class="right">
                        <div>
                            <p>可添加小区（个）</p>
                            <span>6</span>
                        </div>
                        <div>
                            <p>剩余短信（条）</p>
                            <span>4512</span>
                        </div>
                    </div>
                </div>
                <div class="welcomeLine">
                    <img src="./images/1.png" alt=""> <span>欢迎使用智慧物业系统，开启你的智慧生活</span>
                </div>
                <div class=propertyData>
                    <div class="item">
                        <img src="./images/2.png" alt="">
                        <div>
                            <span class="span span1">647</span>
                            <p>房屋认证数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/3.png" alt="">
                        <div>
                            <span class="span span2">1829</span>
                            <p>业主数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/4.png" alt="">
                        <div>
                            <span class="span span3">231</span>
                            <p>租客数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/5.png" alt="">
                        <div>
                            <span class="span span4">39</span>
                            <p>员工数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/7.png" alt="">
                        <div>
                            <span class="span span5">123</span>
                            <p>商家数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/8.png" alt="">
                        <div>
                            <span class="span span6">1290</span>
                            <p>车位数</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/9.png" alt="">
                        <div>
                            <span class="span span7">928</span>
                            <p>登记车辆数</p>
                        </div>
                    </div>
                </div>
                <div class="homeContent">
                    <div class="left">
                        <div class="top">
                            <div id="houseInfor" style="min-width:400px;height:300px;width: 45%;"></div>
                            <div class="top-right">
                                <p>缴费统计</p>
                                <div>
                                    <p>应交费用：<span>2039.23</span>万元</p>
                                    <p>已收：<span>1039.23</span>万元</p>
                                    <p>待收：<span>39.23</span>万元</p>
                                </div>
                                <div>
                                    <div class="item">
                                        <img src="./images/11.png" alt="">
                                        <p>停车费</p>
                                    </div>
                                    <div class="item">
                                        <img src="./images/12.png" alt="">
                                        <p>物业费</p>
                                    </div>
                                    <div class="item">
                                        <img src="./images/13.png" alt="">
                                        <p>商铺租金</p>
                                    </div>
                                    <div class="item">
                                        <img src="./images/14.png" alt="">
                                        <p>水电费</p>
                                    </div>
                                    <div class="item">
                                        <img src="./images/15.png" alt="">
                                        <p>维修费</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="middle">
                            <div id="satisfied" style="min-width:400px;height:300px;width: 45%;"></div>
                            <div id="workOrder" style="min-width:400px;height:300px;width: 54.5%;"></div>
                        </div>
                        <div class="bottom">
                            <div class="bottom-left">
                                <h5>待办工单</h5>
                                <div>
                                    <p>B1-1楼梯口消防设备维修 </p><span>2021-04-12 11：30</span>
                                </div>
                                <div>
                                    <p>A2楼顶出现漏水现象 </p><span>2021-04-12 11：30</span>
                                </div>
                                <div>
                                    <p>B1-1楼梯口消防设备维修 </p><span>2021-04-12 11：30</span>
                                </div>
                                <div>
                                    <p>B1-1楼梯口消防设备维修 </p><span>2021-04-12 11：30</span>
                                </div>
                            </div>
                            <div id="openType" style="min-width:400px;height:250px;width: 54.5%;"></div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="under">
                            <h5>快捷方式</h5>
                            <div>
                                <span>收银台</span>
                                <span>未缴账单</span>
                                <span>小区公告</span>
                            </div>
                            <div>
                                <span>一键保修</span>
                                <span>缴费通知</span>
                                <span class="lastSpan">+添加</span>
                            </div>
                        </div>
                        <div class="inner">
                            <h5>通告通知</h5>
                            <div>
                                <p>五一放假通知</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                            <div>
                                <p>四月账单已生成</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                            <div>
                                <p>小区公区维护提醒</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                            <div>
                                <p>垃圾分类提醒</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                            <div>
                                <p>三月账单已生成</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                            <div>
                                <p>出行安全提示</p>
                                <span>2021-04-12 11：30</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 机构管理 -->
            <div id="mechanism" class="system">
                <div class="system-top">
                    <div>
                        <button>新增</button>
                        <button>导出</button>
                        <button>删除</button>
                    </div>
                    <div>
                        <input type="text" placeholder="请输入机构的名称">
                        <button>查询</button>
                    </div>
                </div>
                <div class="system-bottom">
                    <table>
                        <thead>
                            <th><input type="checkbox"></th>
                            <th>机构名称</th>
                            <th>机构类型</th>
                            <th>机构描述</th>
                            <th>排序号</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>
                                    <img src="./images/under.jpg" alt="">
                                    <span>中山国际</span>
                                </td>
                                <td>分公司</td>
                                <td>--</td>
                                <td>1</td>
                                <td><span>修改</span><span>删除</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 岗位管理 -->
            <div id="post" class="system">
                <div class="system-top">
                    <div>
                        <button>新增</button>
                        <button>导出</button>
                        <button>删除</button>
                    </div>
                    <div>
                        <input type="text" placeholder="请输入岗位名称/岗位编码">
                        <button>查询</button>
                    </div>
                </div>
                <div class="system-bottom">
                    <table>
                        <thead>
                            <th><input type="checkbox"></th>
                            <th>岗位编码</th>
                            <th>岗位名称</th>
                            <th>岗位排序号</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>
                                    <img src="./images/under.jpg" alt="">
                                    <span>ST0001</span>
                                </td>
                                <td>市场部</td>
                                <td>1</td>
                                <td><span>修改</span><span>删除</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 用户管理 -->
            <div id="user-management" class="system">
                <div class="system-top">
                    <div>
                        <button>新增</button>
                        <button>导出</button>
                        <button>删除</button>
                    </div>
                    <div>
                        <input type="text" placeholder="请输入岗位名称/岗位编码">
                        <button>查询</button>
                    </div>
                </div>
                <div class="user-management-bottom">
                    <table>
                        <thead>
                            <th><input type="checkbox"></th>
                            <th>姓名</th>
                            <th>昵称</th>
                            <th>手机号</th>
                            <th>所属机构</th>
                            <th>创建时间</th>
                            <th>状态</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="checkbox"></td>
                                <td>李晓琪</td>
                                <td>xiaoqi</td>
                                <td>19292902903</td>
                                <td>中山国际-管理部</td>
                                <td>2021-04-30- 11：45</td>
                                <td> <span>正常</span></td>
                                <td>
                                    <span>编辑</span>
                                    <span>禁用</span>
                                    <span>岗位</span>
                                    <span>删除</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>

</body>

</html>